<template>
  <uni-popup ref="settingPopup" type="bottom" :safe-area="false" :mask-click="true">
    <view class="setting-container">
      <view class="title">题库切换</view>
      <view class="row" @click="select(1)">
        <view class="label">小车(C1/C2/C3)</view>
        <image src="@/static/zhengque@3x.png" v-if="carType===1" class="active"></image>
        <view class="normal" v-else></view>
      </view>
      <view class="row" @click="select(2)">
        <view class="label">货车(A2/B2)</view>
        <image src="@/static/zhengque@3x.png" v-if="carType===2" class="active"></image>
        <view class="normal" v-else></view>
      </view>
      <view class="row" @click="select(3)">
        <view class="label">客车(A1/B1/A3)</view>
        <image src="@/static/zhengque@3x.png" v-if="carType===3" class="active"></image>
        <view class="normal" v-else></view>
      </view>
    </view>
  </uni-popup>
</template>
<script>
import {mapGetters, mapActions} from 'vuex'

export default {
  name: "SettingDialog",
  computed: {
    ...mapGetters(['carType']),
  },
  methods: {
    ...mapActions(['changeCarType']),
    select(i) {
      this.changeCarType(i)
      this.$refs.settingPopup.close()
    },
    open() {
      this.$refs.settingPopup.open()
    },
  },
}
</script>
<style scoped lang="scss">
.setting-container {
  background-color: #fff;
  border-top-left-radius: 40rpx;
  border-top-right-radius: 40rpx;
  padding-top: 42rpx;
  padding-bottom: 50rpx;
  .title {
    font-weight: bold;
    font-size: 18px;
    text-align: center;
  }
  .row {
    height: 100rpx;
    display: flex;
    align-items: center;
    margin-left: 46rpx;
    margin-right: 36rpx;

    .label {
      flex: 1;
      font-size: 15px;
      font-weight: bold;
    }

    .active {
      width: 36rpx;
      height: 36rpx;
    }

    .normal {
      width: 36rpx;
      height: 36rpx;
      box-sizing: border-box;
      border: 1px solid #B6B6B6;
      border-radius: 100rpx;
    }
  }
}
</style>
